<template>
  <a-form :form="form" @submit="handleSubmit">
    <a-form-item label="参数名称" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
      <a-input
        v-decorator="[
          'paramName',
          { rules: [{ required: true, message: '请输入参数名称' }] }
        ]"
        placeholder="参数名称"
      />
    </a-form-item>
    
    <a-form-item label="参数类型" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
      <a-select
        v-decorator="[
          'paramType',
          { rules: [{ required: true, message: '请选择参数类型' }] }
        ]"
        placeholder="请选择参数类型"
        @change="handleTypeChange"
      >
        <a-select-option value="text">文本</a-select-option>
        <a-select-option value="option">选项</a-select-option>
      </a-select>
    </a-form-item>
    
    <a-form-item label="排序值" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
      <a-input-number
        v-decorator="[
          'sortOrder',
          { rules: [{ required: true, message: '请输入排序值' }] }
        ]"
        style="width: 100%"
      />
    </a-form-item>
    
    <!-- 动态选项配置区域 -->
    <div v-if="form.getFieldValue('paramType') === 'option'">
      <a-divider orientation="left">选项配置</a-divider>
      <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
        <a-form-item
          v-for="(option, index) in options"
          :key="option.key"
        >
          <a-input
            v-model="option.value"
            placeholder="选项值"
            style="width: 30%; margin-right: 8px"
          />
          <a-input
            v-model="option.label"
            placeholder="选项文本"
            style="width: 30%; margin-right: 8px"
          />
          <a-icon
            class="dynamic-delete-button"
            type="minus-circle-o"
            @click="removeOption(index)"
          />
        </a-form-item>
        <a-button type="dashed" @click="addOption">
          <a-icon type="plus" /> 添加选项
        </a-button>
      </a-form-item>
    </div>
    
    <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
      <a-button type="primary" html-type="submit">提交</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
export default {
  beforeCreate() {
    this.form = this.$form.createForm(this);
  },
  data() {
    return {
      options: [],
      optionId: 0
    };
  },
  methods: {
    handleTypeChange(value) {
      if (value !== 'option') {
        this.options = [];
      }
    },
    addOption() {
      this.options.push({
        key: this.optionId++,
        value: '',
        label: ''
      });
    },
    removeOption(index) {
      this.options.splice(index, 1);
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          const formData = {
            ...values,
            options: this.form.getFieldValue('paramType') === 'option' 
              ? this.options.map(opt => ({
                  value: opt.value,
                  label: opt.label
                })) 
              : undefined
          };
          console.log('表单数据:', formData);
          // 这里可以提交数据到后端
          // this.$http.post('/api/save', formData).then(response => {
          //   this.$message.success('保存成功');
          // });
        }
      });
    }
  }
};
</script>

<style scoped>
.dynamic-delete-button {
  cursor: pointer;
  position: relative;
  top: 4px;
  font-size: 16px;
  color: #999;
  transition: all 0.3s;
}
.dynamic-delete-button:hover {
  color: #ff4d4f;
}
</style>